<template>
  <div class="serach-container">
    <!-- 1 搜索栏 -->
    <form action="/">
      <!-- Tips: 在 van-search 外层增加 form 标签，且 action 不为空，即可在 iOS 输入法中显示搜索按钮。 -->
      <van-search show-action v-model="searchText" placeholder="请输入搜索关键词" @search="onSearch"
        @cancel="$router.back()" @focus="isResultShow = false" />
    </form>
    <!-- /搜索栏 -->
    <!-- 4 搜索结果 -->
    <search-result :search-text="searchText" v-if="isResultShow" />
    <!-- /搜索结果 -->
    <!-- 2 联想建议 -->
    <SearchSuggestion :search-text="searchText" v-else-if="searchText" @search="onSearch" />
    <!-- /联想建议 -->
    <!-- 3 历史记录 -->
    <search-history :search-histories="searchHistories" @search="onSearch($event)"
      @deleteAll="searchHistories = []" v-else />
    <!-- /历史记录 -->

  </div>
</template>

<script>
import SearchHistory from './components/search-history.vue'
import SearchResult from './components/search-result.vue'
import SearchSuggestion from './components/search-suggestion.vue'
import { setItem, getItem } from '@/utils/storage.js'
import { mapState } from 'vuex'

export default {
  name: 'SearchIndex',
  components: {
    SearchSuggestion,
    SearchHistory,
    SearchResult
  },
  data () {
    return {
      searchText: '',
      isResultShow: false, // 控制搜索结果的显示状态,
      // 能读到获取数据，若读不到设置为空数组
      searchHistories: [] // 搜索历史数据
    }
  },
  // 计算属性
  computed: {
    ...mapState(['user'])
  },
  // 监控data中的数据变化
  watch: {},
  methods: {
    onSearch (searchText) {
      // 判断搜索文本不能为空
      if (searchText.trim() === '') {
        this.$toast.loading({
          message: '输入文本不能为空',
          // 背景是否不可点击
          forbidClick: true,
          // 展示时长(ms)，值为 0 时，toast 不会消失
          duration: 700
        })
        return
      }

      // 把输入框设置成你点击的文本
      this.searchText = searchText

      // 不要有重复的历史记录
      const index = this.searchHistories.indexOf(searchText)
      if (index !== -1) {
        // 有重复项，将重复项删除
        this.searchHistories.splice(index, 1)
      }
      // 记录搜索历史记录
      this.searchHistories.unshift(searchText)
      // 已登录，调用获取用户搜索记录的接口即可
      if (this.user) {
        // 将线上返回的数据和本地合并起来
        setItem('search-internet-histories', this.searchHistories)
      } else {
        // 未登录，将搜索记录保存在本地
        setItem('search-local-histories', this.searchHistories)
      }
      // 展示搜索结果
      this.isResultShow = true
    },
    // 如果登录将线上和本地的合并起来
    loadSearchHistories () {
      const localHistories = getItem('search-local-histories')
      if (this.user) {
        const internetHistories = getItem('search-internet-histories')
        // 用户已经登录，显示本地和线上合并的存储记录
        if (internetHistories && localHistories) {
          this.searchHistories = [...new Set([...localHistories, ...internetHistories])]
        } else if (internetHistories) {
          this.searchHistories = internetHistories
        } else if (localHistories) {
          this.searchHistories = localHistories
        }
      } else {
        // 未登录，显示本地的存储数据
        if (localHistories) {
          this.searchHistories = localHistories
        }
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.loadSearchHistories()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () { },
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style scoped lang='less'>
</style>
